import React, { useState, useEffect } from "react";
import { Card, Spin } from "antd";
import { DollarOutlined, CheckCircleOutlined, CloudServerOutlined, AreaChartOutlined, StockOutlined, UsergroupAddOutlined } from "@ant-design/icons";
import styled from "styled-components";
import _ from "lodash";
import { useNavigate } from "react-router-dom";

import { decloudStatistics } from "../../services/graphql";
import { formatBalanceStr } from "../../utils/formatter";



function Main({ className }) {
	const navigate = useNavigate();
	window.navigate = navigate;
	const [loading, setLoading] = useState(false);
	const [data, setData] = useState({});

	const loadData = async () => {
		setLoading(true);
		let ret = await decloudStatistics();
		if (ret) {
			setData(ret);
		}
		setLoading(false);
	};
	useEffect(() => {
		loadData();
	}, []);

	return (
		<div className={className}>
			{data && data.totalUsers ? (
				<>
					<div className="title">Users</div>
					<div className="card-box">
						<Card title="Total users" className="card" bordered={true} extra={<UsergroupAddOutlined className="title-icon" />}>
							<div className="big-number">{data.totalUsers.value}</div>
							<div className="desc">{data.totalUsers.dateStr}</div>
						</Card>
						<Card title="New users (24h)" className="card" bordered={true} extra={<StockOutlined className="title-icon" />}>
							<div className="big-number">{data.newUsersLast24Hr.value}</div>
							<div className="desc">{data.newUsersLast24Hr.dateStr}</div>
						</Card>
						<Card title="New users (weekly)" className="card" bordered={true} extra={<AreaChartOutlined className="title-icon" />}>
							<div className="big-number">{data.newUsersLastWeek.value}</div>
							<div className="desc">{data.newUsersLastWeek.dateStr}</div>
						</Card>
					</div>
					<div className="title">Storage</div>
					<div className="card-box">
						<Card title="Sold storage space" className="card" bordered={true} extra={<CloudServerOutlined className="title-icon" />}>
							<div className="big-number">{data.soldStorageSpace}</div>
						</Card>
						<Card title="Sold storage space(history)" className="card" bordered={true} extra={<CloudServerOutlined className="title-icon" />}>
							<div className="big-number">{data.soldStorageSpaceHistory}</div>
						</Card>
					</div>
					<div className="title">Reward</div>
					<div className="card-box">
						<Card title="Invited users" className="card" bordered={true} extra={<CheckCircleOutlined className="title-icon" />}>
							<div className="big-number">{data.invitedUsers}</div>
						</Card>
					</div>
					<div className="title">Finance</div>
					<div className="card-box">
						<Card title="Total income" className="card" bordered={true} extra={<DollarOutlined className="title-icon" />}>
							<div className="big-number">{formatBalanceStr(data.totalIncome.value)}</div>
							<div className="desc">{data.totalIncome.dateStr}</div>
						</Card>
						<Card title="Today's income" className="card" bordered={true} extra={<DollarOutlined className="title-icon" />}>
							<div className="big-number">{formatBalanceStr(data.todayIncome.value)}</div>
							<div className="desc">{data.todayIncome.dateStr}</div>
						</Card>
						<Card title="Week's income" className="card" bordered={true} extra={<DollarOutlined className="title-icon" />}>
							<div className="big-number">{formatBalanceStr(data.weeklyIncome.value)}</div>
							<div className="desc">{data.weeklyIncome.dateStr}</div>
						</Card>
						<Card title="Invite user subsidies" className="card" bordered={true} extra={<DollarOutlined className="title-icon" />}>
							<div className="big-number">{formatBalanceStr(data.inviteUserSubsidies)}</div>
						</Card>
						<Card title="Invite bonus" className="card" bordered={true} extra={<DollarOutlined className="title-icon" />}>
							<div className="big-number">{formatBalanceStr(data.inviteBonus)}</div>
						</Card>
					</div>
				</>
			) : (
				<Spin spinning={loading}></Spin>
			)}
		</div>
	);
}

export default styled(Main)`
	display: block;
	overflow: hidden;
	.title {
		display: block;
		line-height: 60px;
		font-size: 20px;
	}
	.card-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.title-icon {
			font-size: 28px;
			color: #00bcd4;
		}
		.card {
			width: 30%;
			margin-right: 20px;
			margin-bottom: 20px;
			.big-number {
				font-size: 40px;
			}
			.desc {
				color: #888;
				line-height: 40px;
				font-size: 16px;
			}
		}
	}
`;
